<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Smoothline</title>
    <script src="../dist/quark-renderer.js"></script>
</head>
<body>
    <div id="main" style="width:1000px;height:900px;"></div>
    <script type="text/javascript">
        var qr = QuarkRenderer.init(document.getElementById('main'));

        var points = [];
        for (var i = 0; i < 10; i++) {
            points.push([Math.random() * 300 + 100, Math.random() * 300 + 100]);
        }

        var smoothLine = new QuarkRenderer.Polyline({
            position: [10, 10],
            style : {
                lineDash: [5, 5, 10, 10],
                stroke: 'rgba(220, 20, 60, 0.8)',
                lineWidth: 2
            },
            shape: {
                smooth: 'spline',
                points: points
            }
        });

        var smoothPolygon = new QuarkRenderer.Polygon({
            style: {
                // smoothConstraint: [[-Infinity, -Infinity], [200, Infinity]],
                fill: 'rgba(220, 20, 60, 0.4)',
                stroke: 'rgba(220, 20, 60, 1)',
                lineWidth: 2
            },

            shape: {
                points: [[50, 50], [200, 10], [100, 200], [50, 150], [10, 70]],
                smooth: 0.5
            },

            states: {
                normal: {
                    transition: '* 500 0 Linear'
                },
                hover: {
                    shape: {
                        points: [[30, 30], [200, 10], [100, 200], [30, 150], [10, 70]]
                    }
                }
            }
        });
        qr.add(smoothPolygon);
        qr.add(smoothLine);
    </script>
</body>
</html>